<ui:composition  xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:a4j="http://richfaces.org/a4j"
                 xmlns:rich="http://richfaces.org/rich"
                 xmlns:c="http://java.sun.com/jsp/jstl/core"
                 xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    <h:form>
        <rich:panel  header="工资查询" styleClass="content-hight">           
            <h:outputText value="查询日期："/>
            <h:panelGroup id="purchDate">
                <rich:calendar value="#{psnSalaBean.beginDate}"
                               locale="zh_CN"
                               popup="true"
                               styleClass="special"
                               showWeekDaysBar="false"
                               datePattern="yyyy年MM月"
                               showApplyButton="false"
                               showFooter="false"/>
                至
                <rich:calendar value="#{psnSalaBean.endDate}"
                               locale="zh_CN"
                               popup="true"
                               styleClass="special"
                               showWeekDaysBar="false"
                               datePattern="yyyy年MM月"
                               showApplyButton="false"
                               showFooter="false"/>
            </h:panelGroup>
            <a4j:commandButton id="button" value="查询" action="#{psnSalaBean.wageQuery}"
                               render="ladgerGroup"/>
            <h:commandButton id="ebutton" value="导出Excel" action="#{psnSalaBean.exportExcelQuery}"/>
            <hr/>
            <h:panelGroup id="ladgerGroup">
                <rich:dataScroller for="editTable"
                                   render="ladgerGroup"
                                   rendered="#{not empty psnSalaBean.ledger_query}"
                                   fastStep="3"/>
                <div style="width:750px;min-height:200px;overflow:auto;">
                    <h:panelGroup rendered="#{not empty psnSalaBean.ledger_query}">
                        <rich:dataTable id="editTable" value="#{psnSalaBean.ledger_query}"
                                        var="explist" rowKeyVar="rowKey"
                                        rows="15"
                                        style="width: 2200px;margin-bottom: 5px;"  
                                        styleClass="stable"
                                        noDataLabel="无数据!">
                            <f:facet name="header">
                                <rich:columnGroup>
                                    <c:forEach items="#{psnSalaBean.fieldLabels_query}" var="hrow" varStatus="hstatus">                                   
                                        <rich:column>
                                            <h:outputText value="#{hrow}"/>
                                        </rich:column>
                                    </c:forEach>
                                </rich:columnGroup>
                            </f:facet>
                            <c:forEach begin="0" end="#{fn:length(psnSalaBean.fieldLabels_query)-1}" step="1" var="col">
                                <c:if test="#{col lt 2}">
                                    <rich:column style="text-align: center;white-space: nowrap;">
                                        <h:outputText value="#{explist[col]}"/>
                                    </rich:column>
                                </c:if>
                                <c:if test="#{col gt 1}">
                                    <rich:column style="text-align: right">
                                        <h:outputText value="#{explist[col]}">
                                            <f:convertNumber pattern="#,##0.00" type="number"/>
                                        </h:outputText>
                                    </rich:column> 
                                </c:if>
                            </c:forEach>
                        </rich:dataTable>
                        <rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
                        <rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />
                        <rich:jQuery selector=".stable tr" event="mouseover" query="jQuery(this).addClass('active-row')" />
                        <rich:jQuery selector=".stable tr" event="mouseout" query="jQuery(this).removeClass('active-row')" />
                        <rich:jQuery selector=".stable tr" event="click" query="jQuery(this).addClass('click-row')"/>
                        <rich:jQuery selector=".stable tr" event="click" query="jQuery('.stable tr').not(this).removeClass('click-row')"/>
                    </h:panelGroup>
                </div>
            </h:panelGroup>
        </rich:panel>
    </h:form>
</ui:composition>